<template>
  <div class="home">
    <el-image :src="mlogo" fit="fill" :lazy="true" class="home_logo"></el-image>
    <ul class="home_list">
      <li v-for="(item, index) in navs" :key="index" @click="jump(item.path)">
        <span :class="item.icon"></span><span>{{ item.name }}</span>
      </li>
    </ul>
    <div class="home_tit">精品网站</div>
    <div
      class="home_web_con"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="home_web_item" v-for="(item, index) in link" :key="index">
        <a :href="item.url" target="__blank"
          ><el-image
            :src="base + item.pjname"
            fit="cover"
            :lazy="true"
          ></el-image
        ></a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  Ref,
  reactive,
  onMounted,
  getCurrentInstance,
} from "vue";
import logo from "@/assets/img/logo.png";
import { findLink, base } from "../api/api";
import { useRouter } from "vue-router";
interface Link {
  ["id"]: string;
}
export default defineComponent({
  name: "Home",
  setup(props, ctx) {
    const baseurl = ref(base);
    const mlogo: Ref<any> = ref(logo);
    const router = useRouter();
    const navs: Ref<Nav[]> = ref([
      { name: "首页", icon: "el-icon-house", path: "/" },
      { name: "技术文章", icon: "el-icon-notebook-2", path: "/technology" },
      { name: "程序人生", icon: "el-icon-shopping-bag-1", path: "/codeLife" },
      { name: "生活", icon: "el-icon-present", path: "/lifeWrite" },
      { name: "个人简历", icon: "el-icon-postcard", path: "/userInfo" },
    ]);
    const link: Ref<Link | undefined> = ref();
    const loading: Ref<boolean> = ref(true);
    onMounted(() => {
      findLink()
        .then((result) => {
          link.value = result;
          loading.value = false;
        })
        .catch((err) => {
          loading.value = false;
        });
    });

    function jump(path: string) {
      ctx.emit("closedraw");
      router.push(path);
    }
    return {
      baseurl,
      mlogo,
      navs,
      link,
      loading,
      jump,
    };
  },
});
</script>
<style lang="scss" scoped>
.home {
  text-align: center;
  padding: 0.3rem 0.15rem;
  .home_logo {
    width: 2rem;
  }
  .home_list {
    text-align: left;
    list-style: none;
    padding: 0 1rem;
    text-decoration: none;
    li {
      margin: 0.2rem 0;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      padding: 0.2rem 0;
      span:nth-child(1) {
        margin: 0 10px;
        color: #409eff;
      }
    }
  }
  .home_tit {
    margin-top: 0.2rem;
    text-align: left;
    border-left: 4px solid #409eff;
    padding: 0.1rem;
    letter-spacing: 0.02rem;
  }
  .home_web_con {
    text-align: left;
    margin-top: 0.2rem;
    .home_web_item {
      width: 1.2rem;
      height: 1.2rem;
      padding: 0.1rem;
      overflow: hidden;
      display: inline-block;
      border-radius: 12px;
      box-shadow: 3px 3px 2px darkgray;
      .el-image {
        width: 100%;
        height: 100%;
        border-radius: 12px;
      }
    }
  }
}
</style>
